<script lang="ts" setup>
import { ref, watch } from 'vue';
import { toSocialMedia } from '@/utils';

import discord from '@/icons/social/discord.svg?component';
import facebook from '@/icons/social/facebook.svg?component';
import flipboard from '@/icons/social/flipboard.svg?component';
import github from '@/icons/social/github.svg?component';
// import instagram from '@/icons/social/instagram.svg?component'
// import line from '@/icons/social/line.svg?component'
import line from '@/assets/images/line.png';
import instagram from '@/assets/images/instagram.png';
// import linkedin from '@/icons/social/linkedin.svg?component'
import medium from '@/icons/social/medium.svg?component';
import more from '@/icons/social/more.svg?component';
import pinterest from '@/icons/social/pinterest.svg?component';
import reddit from '@/icons/social/reddit.svg?component';
import skype from '@/icons/social/skype.svg?component';
import snapchat from '@/icons/social/snapchat.svg?component';
import talk from '@/icons/social/talk.svg?component';
import telegram from '@/icons/social/telegram.svg?component';
import tiktok from '@/icons/social/tiktok.svg?component';
import tumblr from '@/icons/social/tumblr.svg?component';
import twitter from '@/icons/social/twitter.svg?component';
import viber from '@/icons/social/viber.svg?component';
import whatsapp from '@/icons/social/whatsapp.svg?component';
import youtube from '@/icons/social/youtube.svg?component';
import zalo from '@/icons/social/zalo.svg?component';
import vk from '@/icons/social/vk.svg?component';

const isShowMoreContact = ref<boolean>(false);

// const socialMediaIcons = reactive<any>({
//   twitter: false,
//   telegram: false,
//   discord: false,
//   facebook: false,
//   instagram: false,
//   youtube: false,
//   tiktok: false,
//   medium: false,
//   reddit: false,
//   whatsapp: false,
//   viber: false,
//   line: false,
//   linkedin: false,
//   talk: false,
//   skype: false,
//   snapchat: false,
//   flipboard: false,
//   zalo: false,
//   tumblr: false,
//   github: false,
//   pinterest: false,
//   vk: false
// })

watch(
  () => isShowMoreContact.value,
  newVal => {
    if (newVal) {
      setTimeout(() => {
        if (isShowMoreContact.value === true) {
          isShowMoreContact.value = false;
        }
      }, 12000);
    }
  }
);
</script>

<template>
  <div class="contact-way flex-column relative">
    <twitter
      class="contact-item"
      @click.stop="toSocialMedia('twitter')"
    ></twitter>
    <discord
      class="contact-item"
      @click.stop="toSocialMedia('discord')"
    ></discord>
    <telegram
      class="contact-item"
      @click.stop="toSocialMedia('telegram')"
    ></telegram>
    <medium class="contact-item" @click.stop="toSocialMedia('medium')"></medium>
    <facebook
      class="contact-item"
      @click.stop="toSocialMedia('facebook')"
    ></facebook>
    <!--    <instagram class="contact-item" @click.stop="toSocialMedia('instagram')"></instagram>-->
    <img
      :src="instagram"
      alt=""
      class="contact-item contact-img-item"
      @click.stop="toSocialMedia('instagram')"
    />
    <youtube
      class="contact-item"
      @click.stop="toSocialMedia('youtube')"
    ></youtube>
    <tiktok class="contact-item" @click.stop="toSocialMedia('tiktok')"></tiktok>
    <more
      class="contact-item"
      @click.stop="isShowMoreContact = !isShowMoreContact"
    ></more>

    <div class="more-contact-way-container" v-if="isShowMoreContact">
      <whatsapp
        class="contact-item"
        @click.stop="toSocialMedia('whatsapp')"
      ></whatsapp>
      <img
        :src="line"
        alt=""
        class="contact-item contact-img-item"
        @click.stop="toSocialMedia('line')"
      />
      <talk class="contact-item" @click.stop="toSocialMedia('talk')"></talk>
      <zalo class="contact-item" @click.stop="toSocialMedia('zalo')"></zalo>
      <vk class="contact-item" @click.stop="toSocialMedia('vk')"></vk>
      <skype class="contact-item" @click.stop="toSocialMedia('skype')"></skype>
      <viber class="contact-item" @click.stop="toSocialMedia('viber')"></viber>

      <reddit
        class="contact-item"
        @click.stop="toSocialMedia('reddit')"
      ></reddit>
      <snapchat
        class="contact-item"
        @click.stop="toSocialMedia('snapchat')"
      ></snapchat>
      <github
        class="contact-item"
        @click.stop="toSocialMedia('github')"
      ></github>
      <pinterest
        class="contact-item"
        @click.stop="toSocialMedia('pinterest')"
      ></pinterest>
      <flipboard
        class="contact-item"
        @click.stop="toSocialMedia('flipboard')"
      ></flipboard>
      <tumblr
        class="contact-item"
        @click.stop="toSocialMedia('tumblr')"
      ></tumblr>
      <!--      <linkedin class="contact-item"></linkedin>-->

      <!--      <div class="contact-item"></div>-->
      <!--      <div class="contact-item"></div>-->
      <!--      <div class="contact-item"></div>-->
      <!--      <div class="contact-item"></div>-->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.contact-way {
  position: fixed;
  bottom: 30%;
  left: 30px;
  z-index: 1199;
  @apply xs:mb-6 xs:grid xs:gap-y-6 xs:gap-x-3 xs:grid-cols-5 xs:grid-rows-2 xs:relative xs:left-[unset] xs:bottom-[unset] xs:right-[unset] xs:mx-6;

  .contact-item {
    margin-bottom: 4px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    object-fit: contain;
    @apply xs:mb-0;
  }
  .contact-img-item {
    @apply xs:w-10 xs:h-10;
  }

  .more-contact-way-container {
    transition: 0.4s;
    position: fixed;
    left: 86px;
    bottom: 30%;
    background: #ffffff;
    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding: 20px;
    display: grid;
    grid-template-columns: 40px 40px;
    grid-template-rows: repeat(7, 40px);
    grid-auto-flow: column;
    column-gap: 10px;
    row-gap: 10px;
    z-index: 100;
    @apply xs:top-[unset] xs:grid-cols-[40px_40px_40px_40px_40px] xs:grid-rows-3 xs:gap-x-[18px] xs:items-center xs:justify-center xs:gap-y-[8px] xs:bottom-[144px] xs:left-[10px] xs:right-[10px] xs:px-[14px] xs:py-[16px] xs:grid-flow-row;
  }
}
</style>
